<template>
  <p-modal
    :visible="visible"
    :title="title"
    :mask-closable="false"
    :destroy-on-close="true"
    :width="800"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p-form-model ref="fuleForm" :model="form" :rules="rules" layout="inline">
      <p-form-model-item label="邮件主旨" prop="subject" style="width: 100%">
        <p-input v-model="form.subject" />
      </p-form-model-item>
      <p-form-model-item
        ref="sendEmail"
        label="主送"
        prop="send"
        style="width: 100%; margin-top: 5px; height: 32px; position: relative"
      >
        <p-select
          v-model="form.toValue"
          style="width: 930%"
          :open="false"
          mode="multiple"
          max-tag-count="5"
          class="select-container"
          placeholder="请点击客户或我方团队选择选择"
          @change="handle"
        >
          <!-- prettier-ignore -->
        </p-select>
        <!-- <p v-if="isvalidate" class="validate">请选择主送人</p> -->
      </p-form-model-item>
      <div style="margin-top: 5px">
        <p-button
          style="margin-left: 72px; margin-right: 15px"
          @click="toDialog(true)"
        >
          选择客户方团队
        </p-button>
        <p-button @click="toDialog1(true)">选择我方团队</p-button>
      </div>
      <p-form-model-item
        label="抄送"
        prop="remark"
        style="width: 100%; margin-top: 15px"
      >
        <p-select
          style="width: 930%"
          :value="ccValue"
          max-tag-count="5"
          :open="false"
          mode="multiple"
          class="select-container"
          placeholder="请点击客户或我方团队选择选择"
          @change="handle1"
        >
          <!-- prettier-ignore -->
        </p-select>
      </p-form-model-item>
      <p-button
        style="margin-left: 72px; margin-right: 15px"
        @click="toDialog(false)"
      >
        选择客户方团队
      </p-button>
      <p-button @click="toDialog1(false)">选择我方团队</p-button>
    </p-form-model>
    <DialogEmailCustomerList
      :datasource-customer="datasourceCustomer"
      :visible.sync="visibleCustomer"
      :select-customer.sync="selectCustomer"
      :keys="keys"
      :load="load"
      :visit-id="visitId"
      @customer-table-list="customerTableList"
    />
    <DialogEmailMyList
      :visible.sync="visibleMy"
      :select-my.sync="selectMy"
      :load="load"
      :visit-id="visitId"
      :keys="keys"
      @my-table-list="myTableList"
    />
    <DialogccEmailCustomerList
      :datasource-customer="datasourceCustomer"
      :visible.sync="visibleCustomer1"
      :select-customer.sync="selectCustomer"
      :cckeys="cckeys"
      :load="load"
      :visit-id="visitId"
      @customer-table-list-cc="customerTableListCc"
    />
    <DialogccEmailMyList
      :visible.sync="visibleMy1"
      :cckeys="cckeys"
      :select-my.sync="selectMy"
      :visit-id="visitId"
      :keys="keys"
      @my-table-list-cc="myTableListCc"
    />
  </p-modal>
</template>

<script>
import DialogEmailCustomerList from '@/components/dialog/DialogEmailCustomerList.vue';
import DialogEmailMyList from '@/components/dialog/DialogEmailMyList.vue';
import DialogccEmailMyList from '@/components/dialog/DialogccEmailMyList.vue';
import DialogccEmailCustomerList from '@/components/dialog/DialogccEmailCustomerList.vue';
import { postCustomerList, postSendEmail, getMyList } from '@/api/visit.js';

export default {
  components: {
    DialogEmailCustomerList,
    DialogEmailMyList,
    DialogccEmailCustomerList,
    DialogccEmailMyList,
  },
  props: {
    title: {
      type: String,
      default: '发送会议纪要',
    },
    visible: {
      type: Boolean,
      default: false,
    },

    subject: {
      type: [String, Number],
      default: undefined,
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    visitId: {
      type: String,
      default: '',
    },
    customerCode: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      rules: {
        subject: [{ required: true, message: '请输入主旨', trigger: 'blur' }],
        remark: [{ max: 256, message: '输入的内容过长', trigger: 'blur' }],
        send: [
          {
            required: true,
            validator: (rules, value, callback) => {
              console.log(
                'this.form.toValue.length: ',
                this.form.toValue.length
              );
              if (this.form.toValue.length !== 0) {
                callback();
              } else {
                callback(new Error(rules.message));
              }
            },
            message: '请选择主送人',
            trigger: 'change',
          },
        ],
      },
      visibleCustomer: false,
      visibleCustomer1: false,
      visibleMy: false,
      visibleMy1: false,
      datasourceCustomer: [],
      load: false,
      ccValue: [],
      tEmail: [],
      cEmail: [],
    };
  },
  computed: {
    toEail() {
      const dataEail = [];
      this.tEmail.forEach((item) => {
        if (this.keys.indexOf(item.id) !== -1) {
          delete item.id;
          dataEail.push(item);
        }
      });
      return dataEail;
    },
    keys() {
      const keys = [];
      this.tEmail.forEach((item) => {
        if (this.form.toValue.indexOf(item.name) !== -1) {
          keys.push(item.id);
        }
      });
      return keys;
    },
    cckeys() {
      const keys = [];
      this.cEmail.forEach((item) => {
        if (this.ccValue.indexOf(item.name) !== -1) {
          keys.push(item.id);
        }
      });
      return keys;
    },
    ccEail() {
      let dataEail = [];
      this.cEmail.forEach((item) => {
        if (this.cckeys.indexOf(item.id) !== -1) {
          dataEail.push(item);
        }
      });
      dataEail = dataEail.map((item) => item.email);
      return dataEail;
    },
  },
  methods: {
    validate() {
      return new Promise((resolve) => {
        this.$refs.fuleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
    handle(val) {
      this.form.toValue = val;
      this.$refs.sendEmail.onFieldChange();
    },
    handle1(val) {
      this.ccValue = val;
    },
    customerTableList(val) {
      const value = val.map((item) => item.name);
      this.form.toValue = this.form.toValue.concat(value);
      this.$refs.sendEmail.onFieldChange();
      this.tEmail = this.remove(this.tEmail.concat(val));
    },
    customerTableListCc(val) {
      const value = val.map((item) => item.name);
      this.ccValue = this.ccValue.concat(value);
      this.cEmail = this.remove(this.cEmail.concat(val));
    },
    myTableListCc(val) {
      const value = val.map((item) => item.name);
      this.ccValue = this.ccValue.concat(value);
      this.cEmail = this.remove(this.cEmail.concat(val));
    },
    myTableList(val) {
      const value = val.map((item) => item.name);
      this.form.toValue = this.form.toValue.concat(value);
      this.$refs.sendEmail.onFieldChange();
      this.tEmail = this.remove(this.tEmail.concat(val));
    },
    remove(arr) {
      const obj = {};
      arr = arr.reduce((pre, cur) => {
        obj[cur.id] ? '' : (obj[cur.id] = true && pre.push(cur));
        return pre;
      }, []);
      return arr;
    },

    async toDialog1(val) {
      if (val) {
        this.visibleMy = true;
      } else {
        this.visibleMy1 = true;
      }
    },
    async toDialog(val) {
      if (val) {
        this.visibleCustomer = true;
      } else {
        this.visibleCustomer1 = true;
      }
      this.load = true;
      const name = {
        cname: this.customerCode,
        pageSize: 10,
        current: 1,
      };
      const result = await postCustomerList(name).finally(() => {
        this.load = false;
      });
      this.datasourceCustomer = result?.data?.data?.records || [];
    },
    handleChange(val) {
      this.form.name = [val];
      this.$refs.search && this.$refs.search.clear();
    },
    handleDeselect() {
      this.form.name = [];
    },
    handleCancel() {
      this.ccValue = [];
      this.form.toValue = [];
      this.$emit('update:visible', false);
    },
    async handleOk() {
      let valid = await this.validate();
      if (!valid) return new Promise(() => {});
      const data = {
        cc: this.ccEail,
        minutesId: this.form.minutesId,
        subject: this.form.subject,
        to: this.toEail,
      };
      const result = await postSendEmail(data);
      if (result.data.code === 0) {
        this.$message.success('发送邮件成功');
      }
      this.handleCancel();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .poros-input {
  width: 930%;
}
/deep/ .poros-row {
  height: 32px;
}
/deep/ .poros-col {
  width: 72px;
}
.validate {
  position: absolute;
  margin-top: -9px;
  color: #f56c6c;
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
</style>
